import { NavBar, Button, TextArea } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'

function Index() {
  const nav = useNavigate()
  const [symptomDescription, setSymptomDescription] = useState('')
  
  const handleBack = () => {
    nav(-1)
  }

  const handleSubmit = async () => {
    if (symptomDescription.length < 5) {
      alert('请至少输入5个字符描述您的症状')
      return
    }
    
    if (symptomDescription.length > 500) {
      alert('描述不能超过500个字符')
      return
    }

    try {
      // 提交病情描述，跳转到匹配医生页面
      // 这里可以调用接口保存病情描述
      nav('/doctor', { state: { description: symptomDescription } })
    } catch (error) {
      console.error('提交失败:', error)
      alert('提交失败，请重试')
    }
  }

  const handleConsentClick = () => {
    // 跳转到知情同意书页面
    nav('/privacy')
  }

  return (
    <div style={{ 
      width: '100vw', 
      minHeight: '100vh', 
      background: '#fff' 
    }}>
      {/* 导航栏 */}
      <NavBar 
        onBack={handleBack} 
        style={{ 
          background: '#fff',
          borderBottom: '1px solid #f0f0f0'
        }}
      >
        描述病情
      </NavBar>

      {/* 步骤进度指示器 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: '8px'
        }}>
          <span style={{
            color: '#1677ff',
            fontWeight: 'bold',
            fontSize: '14px'
          }}>
            描述病情
          </span>
          <span style={{ color: '#ccc', fontSize: '12px' }}>›</span>
          <span style={{
            color: '#999',
            fontSize: '14px'
          }}>
            匹配医生
          </span>
          <span style={{ color: '#ccc', fontSize: '12px' }}>›</span>
          <span style={{
            color: '#999',
            fontSize: '14px'
          }}>
            开始咨询
          </span>
        </div>
      </div>

      {/* 服务保障 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        padding: '16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{
          width: '24px',
          height: '24px',
          borderRadius: '50%',
          background: '#1677ff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          marginRight: '12px'
        }}>
          <span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold' }}>+</span>
        </div>
    <div>
          <div style={{
            fontSize: '16px',
            fontWeight: 'bold',
            marginBottom: '4px'
          }}>
            服务保障
          </div>
          <div style={{
            fontSize: '12px',
            color: '#666',
            display: 'flex',
            gap: '8px'
          }}>
            <span>专业医生</span>
            <span style={{ color: '#ddd' }}>•</span>
            <span>实名认证</span>
            <span style={{ color: '#ddd' }}>•</span>
            <span>多轮沟通</span>
            <span style={{ color: '#ddd' }}>•</span>
            <span>超时退款</span>
          </div>
        </div>
      </div>

      {/* 知情同意书提示 */}
      <div style={{
        padding: '16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{
          fontSize: '12px',
          color: '#666',
          lineHeight: '1.5'
        }}>
          请您仔细阅读
          <span 
            style={{ 
              color: '#1677ff', 
              cursor: 'pointer',
              textDecoration: 'underline'
            }}
            onClick={handleConsentClick}
          >
            《风险告知及患者知情同意书》
          </span>
          ,如非复诊,我们仅提供医疗咨询服务。继续操作表示您知悉并同意上述告知内容。
        </div>
      </div>

      {/* 医生助手聊天界面 */}
      <div style={{
        padding: '16px',
        background: '#fff',
        minHeight: '300px'
      }}>
        {/* 助手消息1 */}
        <div style={{
          display: 'flex',
          alignItems: 'flex-start',
          marginBottom: '16px'
        }}>
          <div style={{
            width: '32px',
            height: '32px',
            borderRadius: '50%',
            background: '#1677ff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginRight: '12px',
            flexShrink: 0
          }}>
            <span style={{ color: '#fff', fontSize: '16px' }}>👩‍⚕️</span>
          </div>
          <div style={{
            background: '#f5f5f5',
            borderRadius: '12px 12px 12px 4px',
            padding: '12px 16px',
            maxWidth: '80%',
            fontSize: '14px',
            lineHeight: '1.4'
          }}>
            您好,我是您的医生助手。
          </div>
        </div>

        {/* 助手消息2 */}
        <div style={{
          display: 'flex',
          alignItems: 'flex-start',
          marginBottom: '24px'
        }}>
          <div style={{
            width: '32px',
            height: '32px',
            borderRadius: '50%',
            background: '#1677ff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginRight: '12px',
            flexShrink: 0
          }}>
            <span style={{ color: '#fff', fontSize: '16px' }}>👩‍⚕️</span>
          </div>
          <div style={{
            background: '#f5f5f5',
            borderRadius: '12px 12px 12px 4px',
            padding: '12px 16px',
            maxWidth: '80%',
            fontSize: '14px',
            lineHeight: '1.4'
          }}>
            请在下方输入框详细描述病情,以便医生准确了解您的情况,快速接诊
          </div>
        </div>
      </div>

      {/* 底部输入区域 */}
      <div style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        background: '#fff',
        borderTop: '1px solid #f0f0f0',
        padding: '16px',
        boxShadow: '0 -2px 8px rgba(0,0,0,0.1)'
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'flex-end',
          gap: '12px'
        }}>
          <div style={{ flex: 1 }}>
            <TextArea
              placeholder="请用5-500字描述具体症状、患病时长、用药情况、需要医生提供哪些帮助等, 以便医生更好帮助您解决问题。"
              value={symptomDescription}
              onChange={setSymptomDescription}
              maxLength={500}
              rows={3}
              style={{
                fontSize: '14px',
                borderRadius: '8px',
                border: '1px solid #d9d9d9'
              }}
            />
            <div style={{
              textAlign: 'right',
              fontSize: '12px',
              color: '#999',
              marginTop: '4px'
            }}>
              {symptomDescription.length}/500
            </div>
          </div>
          <Button
            color="primary"
            onClick={handleSubmit}
            style={{
              borderRadius: '8px',
              height: '40px',
              padding: '0 16px',
              fontSize: '14px',
              fontWeight: 'bold'
            }}
          >
            提交
          </Button>
        </div>
      </div>

      {/* 底部占位，避免内容被输入框遮挡 */}
      <div style={{ height: '120px' }} />
    </div>
  )
}

export default Index